<template>
	<div class="map">
		<h3>货源地地图分布</h3>
		<div id="container" ref="baiduRef"></div>
	</div>
		<el-dialog
    v-model="dialogVisible"
    title="统计"
    width="60%"
    :before-close="handleClose"
  >
    <div id="barChart">
		<p>店铺地址：{{nowaddress}}</p>
		<div class="card">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="month" label="月份" align="center" />
				<el-table-column prop="lastDate" label="去年进货量" align="center" />
				<el-table-column prop="nowDtate" label="今年进货量" align="center"/>
			</el-table>
		</div>
	</div>
  </el-dialog>
</template>

<script lang= "ts" setup>
import { onMounted, ref, reactive, watch } from 'vue';
import * as echarts from 'echarts';

const baiduRef = ref()
const nowaddress = ref('')
const dialogVisible = ref(false)
watch(dialogVisible,(newValue,oldValue)=>{
	console.log(1);
	tableData.value.forEach(it => {
		it.lastDate = Math.floor(Math.random()*10000+1000)
		it.nowDtate = Math.floor(Math.random()*10000+1000)
	})
})
	const tableData = ref([
	{
		month: '1',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '2',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '3',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '4',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '5',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '6',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '7',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '8',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '9',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '10',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '11',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
	{
		month: '12',
		lastDate: Math.floor(Math.random()*10000+1000),
		nowDtate: Math.floor(Math.random()*10000+1000),
	},
])



onMounted(() => {

	const map = new BMapGL.Map('container');
	map.centerAndZoom(new BMapGL.Point(104.04767608141508,30.63681859977784), 15);
	map.enableScrollWheelZoom(true);
	var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
	map.addControl(navi3DCtrl);

	// 创建城市选择控件
	const cityControl = new BMapGL.CityListControl({
		// 控件的停靠位置（可选，默认左上角）
		anchor: BMAP_ANCHOR_TOP_LEFT,
		// 控件基于停靠位置的偏移量（可选）
		offset: new BMapGL.Size(10, 5)
	});
	// 创建点标记
	// const marker1 = new BMapGL.Marker(new BMapGL.Point(104.03462950574536,30.631627910151966));
	// const marker2 = new BMapGL.Marker(new BMapGL.Point(104.04767608141508,30.63681859977784));
	// const marker3 = new BMapGL.Marker(new BMapGL.Point(104.05564914582008,30.627579539402976));
	// const marker4 = new BMapGL.Marker(new BMapGL.Point(104.03350216173682,30.61626518574051));
	// const marker5 = new BMapGL.Marker(new BMapGL.Point(104.03836813478111,30.66658664707655));
	// const marker6 = new BMapGL.Marker(new BMapGL.Point(104.0768221836532,30.62306169109991));
	// const marker7 = new BMapGL.Marker(new BMapGL.Point(104.07170728187965,30.595897922402102));
	const markers = [
		new BMapGL.Marker(new BMapGL.Point(104.03462950574536,30.631627910151966)),
		new BMapGL.Marker(new BMapGL.Point(104.04767608141508,30.63681859977784)),
		new BMapGL.Marker(new BMapGL.Point(104.05564914582008,30.627579539402976)),
		new BMapGL.Marker(new BMapGL.Point(104.03350216173682,30.61626518574051)),
		new BMapGL.Marker(new BMapGL.Point(104.03836813478111,30.66658664707655)),
		new BMapGL.Marker(new BMapGL.Point(104.0768221836532,30.62306169109991)),
		new BMapGL.Marker(new BMapGL.Point(104.07170728187965,30.595897922402102)),
		new BMapGL.Marker(new BMapGL.Point(104.050969,30.62768)),
		new BMapGL.Marker(new BMapGL.Point(104.056431,30.628425)),
		new BMapGL.Marker(new BMapGL.Point(104.056431,30.628425)),
		new BMapGL.Marker(new BMapGL.Point(104.046208,30.626872)),
		new BMapGL.Marker(new BMapGL.Point(104.049999,30.634842)),
		new BMapGL.Marker(new BMapGL.Point(104.045166,30.633832)),
		new BMapGL.Marker(new BMapGL.Point(104.08108,30.635743)),
		new BMapGL.Marker(new BMapGL.Point(104.065989,30.620889)),
		new BMapGL.Marker(new BMapGL.Point(104.048813,30.615482)),
		new BMapGL.Marker(new BMapGL.Point(104.038824,30.621635)),
		new BMapGL.Marker(new BMapGL.Point(104.10537,30.627043)),
		new BMapGL.Marker(new BMapGL.Point(104.114066,30.632698)),
		new BMapGL.Marker(new BMapGL.Point(104.129229,30.62263)),
		new BMapGL.Marker(new BMapGL.Point(104.06951,30.654137)),
		new BMapGL.Marker(new BMapGL.Point(104.0325,30.643822)),
		new BMapGL.Marker(new BMapGL.Point(104.035302,30.634314)),
		new BMapGL.Marker(new BMapGL.Point(104.039111,30.652583)),
		new BMapGL.Marker(new BMapGL.Point(104.028906,30.645438)),
		new BMapGL.Marker(new BMapGL.Point(104.059449,30.644133)),
		new BMapGL.Marker(new BMapGL.Point(104.051616,30.640715)),
	]
	markers.forEach(it => {
		const geoc = new BMapGL.Geocoder()
		map.addOverlay(it)
		it.addEventListener('click', function (e) {
			dialogVisible.value = true
			const point = e.target.getPosition()
			console.log(point.lng,point.lat);
			geoc.getLocation(point,(result)=>{
				if(result){
					console.log(result.address);
					nowaddress.value = result.address
				}
			})
		})
	})
	// // 在地图上添加点标记
	// map.addOverlay(marker1);
	// map.addOverlay(marker2);
	// map.addOverlay(marker3);
	// map.addOverlay(marker4);
	// map.addOverlay(marker5);
	// map.addOverlay(marker6);
	// map.addOverlay(marker7);

	// marker1.addEventListener('click',function() {
	// 	dialogVisible.value = true
	// 	console.log('点击');
	// })

	
	// 将控件添加到地图上
	map.addControl(cityControl);

	// 创建定位控件
	var locationControl = new BMapGL.LocationControl({
		// 控件的停靠位置（可选，默认左上角）
		anchor: BMAP_ANCHOR_TOP_RIGHT,
		// 控件基于停靠位置的偏移量（可选）
		offset: new BMapGL.Size(20, 20)
	});
	// 将控件添加到地图上
	map.addControl(locationControl);

	// 添加定位事件
	locationControl.addEventListener("locationSuccess", function (e: { addressComponent: { province: string; city: string; district: string; street: string; streetNumber: string; }; }) {
		var address = '';
		address += e.addressComponent.province;
		address += e.addressComponent.city;
		address += e.addressComponent.district;
		address += e.addressComponent.street;
		address += e.addressComponent.streetNumber;
		alert("当前定位地址为：" + address);
	});
	locationControl.addEventListener("locationError", function (e: { message: any; }) {
		alert(e.message);
	});

})

</script>

<style lang= "less" scoped>
.map {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
}

#container {
	width: 100vw;
	height: 88vh;
}

h3 {
	position: absolute;
	top: 30px;
	left: 0;
	z-index: 1;
}
#barChart{
	text-align: center;
}
</style>
